<template>
<div class="wrap">
<xcl-header :page-title="pageTitle" :call-back="()=>{}" :header-right="headerRight"></xcl-header>
<div class="content">
	<div class="list-block">
	    <ul>
	   
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:25%">设置昵称</div>
	            <div class="item-input">
	              <input type="text" placeholder= '2～20位字符，可包含中文、字母、数字、"-"、"_"' maxlength="20" v-model="user.nickName">
	            </div>
	          </div>
	        </div>
	      </li>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:25%">设置密码</div>
	            <div class="item-input">
	              <input type="password" placeholder="6-20位字母、数字或符号的组合" maxlength="20" v-model="user.password">
	            </div>
	          </div>
	        </div>
	      </li>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:25%">确认密码</div>
	            <div class="item-input">
	              <input type="password" placeholder="6-20位字母、数字或符号的组合" maxlength="20" v-model="user.repeatPassword">
	            </div>
	          </div>
	        </div>
	      </li>
		</ul>
	</div>
	<div class="content-block">
	<button :class="['button','button-fill','btn-style',forbidenLogin ? 'disabled':'']"  @click="signUp">{{pageTitle}}</button>
	</div>	
</div>
<xcl-toast :show="toast.show" :show-content="toast.content"></xcl-toast>

  </div>
</template>
<script>
	import xclHeader from '../components/header.vue'
	import {getCheck,ERROR_DEFINE}  from '../libs/utils'
	import xclToast from '../components/xclToast.vue'

	let UserProxy =  require("../proxy/user_proxy");
	let User = new UserProxy();
	export default {
		data(){
			return{
				pageTitle:'注册',
				headerRight:'',
				forbidenLogin:true,
				callBack:()=>{},
				header:{
					show:true
				},
                user:{
                	nickName:'',
                	password:'',
                	repeatPassword:''
                },
                toast:{
                	show:false,
                	content:''
                }
			}
		},
		watch:{
			'user':{
				handler:function (val,oldVal) {
					if(getCheck.checkNickName(val.nickName) && getCheck.checkPassword(val.password) && val.password == val.repeatPassword){
						this.forbidenLogin = false;
					}else{
						this.forbidenLogin = true;
					}
					
				},
				deep:true
			}
		},
		methods:{
			signUp(){
				let _this = this;
				if(this.forbidenLogin) return false;
				User.register('loginname',_this.user.password,_this.user.nickName,localStorage.phoneNumber,'','dc','h5_web',localStorage.smsCode,(d)=>{
					if(d.code == 200){
						_this.forbidenLogin = true;
						_this.pageTitle = '注册中';
						localStorage.token  = d.results[0].t;
						localStorage.nickName = _this.user.nickName;
						_this.toast = {show:true,content:'注册成功，跳转中...'};
                        setTimeout(()=>{
                        	_this.toast.show = false;
                        	_this.$route.router.go('/User');
                        },2800);
					}else{
						_this.showToast(ERROR_DEFINE[d.code]);
					}
				});
			},
			refreshCode(){
				this.softCode=SoftCodeUrl+'?img='+Math.floor(Math.random() * (10000 + 1));
			},
			showToast(text){
				this.toast={show:true,content:text};
				setTimeout(()=>{this.toast.show =  false},2800);
			}
		},
		components:{
           "xclHeader":xclHeader,  
           'xclToast':xclToast              
        }
	}
</script>
<style  lang="stylus">
	.text-right
		text-align right
	.btn-style
		height 2rem
		font-size .85rem
		line-height 2rem !important
		width:100%
	.mute
		color #ddd	
	.f12
		font-size .8em	
</style>	
